<template>
<div class="container">
  <div class="top">
    <van-nav-bar

  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
  </div>
  
  <div class="img">
    <img src="@/assets/1.png" alt="">
  </div>
  <div class="box">
    <input type="text" placeholder="请输入兑换码">
    <button>兑换</button>
  </div>

</div>
</template>

<script setup>
import {useRouter} from "vue-router";
const router = useRouter();
const onClickLeft =()=>{
  router.back()
}
</script>

<style scoped lang="less">

.container{

  .top{
    width: 100%;
    margin:0 auto;
  }
  .img{
    width: 300px;
    height: 300px;
    margin:0 auto;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    margin-top:100px;
    img{
      width: 100%;
      height: 100%;
    }

  }

  .box{
    width: 300px;
    height: 200px;
    display: flex;
    margin:0 auto;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #000000;
    align-items: center;

    input{
      border:0 transparent solid;
      height: 50px;
      border-radius: 25px;
      text-indent: 1em;
      width: 200px;
    }
    button{
        border:3px #fff solid;
      width: 100px;
      background-color: black;
      color: #fff;
      height: 50px;
      letter-spacing: 10px;

    }
  }

  
}

</style>